<template>
  <div class="wft-w-h-100">
    <van-tag
      type="default"
      :round="attrs.shape == 'circle'"
      :size="attrs.size == 'mini' || attrs.size == 'medium' ? 'medium' : 'large'"
      :color="attrs.bgColor"
      :text-color="attrs.color"
      :plain="attrs.plain"
      :closeable="attrs.closable"
    >{{ value }}</van-tag>
  </div>
</template>
<script setup lang='ts'>
import { useAttrs, useTempValue } from 'generator/hooks'

const props = defineProps<{
  panelJson: TPanel
  curComp: TComp
}>()

const attrs = useAttrs(props.curComp.attrs)

const value = useTempValue(attrs, props.curComp, props.panelJson)
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>